
<template>
  <div class="hospital">
    <!-- 顶部背景区域 -->
    <div class="topBgArea">
      <!-- 标题 -->
      <div class="title">医疗救治定点医院和发热门诊一览</div>
    </div>
    <!-- 搜索区域 -->
    <div class="searchArea">
      <!-- 搜索框 -->
      <el-input placeholder="请输入医院名称" v-model="hosName" clearable>
      </el-input>
      <!-- 搜索按钮 -->
      <el-button @click="getHosData" class="searchBtn" type="primary"
        >搜索</el-button
      >
    </div>
    <!-- 医院列表展示区域 -->
    <div class="hospitalInfo">
      <div class="hosListArea" id="list" v-for="item in hosData" :key="item.id">
        <!-- 医院信息展示部分 -->
        <div class="hosInfo" @click="showDrawer(item)" type="primary">
          <!-- 名称 -->
          <div class="name">{{ item.name }}</div>
          <!-- 描述 -->
          <!-- <div class="desc">{{ item.flags }}</div> -->
          <!-- 地址 -->
          <div class="address">
            {{ item.province + item.city + item.area + item.address }}
          </div>
        </div>
        <!-- 定位距离展示部分 -->
        <div
          class="disLocation"
          style="text-align: center"
          @click="toMap(item)"
        >
          <!-- 小图标 -->
          <img width="30px" src="../assets/1.png" alt="" />
          <!-- 与当前定位的距离 -->
          <div class="dis" style="font-size: 5px">{{ item.distance }}km</div>
        </div>
      </div>
    </div>
    <!-- 地图 -->
    <div class="map">
      <div id="container_hospital"></div>
    </div>
    <div>
      <el-drawer
        title=" "
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose"
      >
        <!-- 医院名称 -->
        <div class="title">{{ drawerInfo.name }}</div>
        <!-- 横线 -->
        <div style="border: 1px solid #ccc"></div>
        <!-- 电话 -->
        <div class="listInfo">
          <div class="imag">
            <img src="../assets/tele.png" width="22" height="22" />
          </div>
          <div class="into">{{ drawerInfo.phone }}</div>
        </div>
        <!-- 网址 -->
        <div class="listInfo">
          <div class="imag">
            <img src="../assets/web.png" width="22" height="22" />
          </div>
          <div class="into">
            <a href="#">{{ drawerInfo.postcode }}</a>
            </div>
        </div>
        <!-- 详细描述 -->
        <div style="border: 1px solid #ccc"></div>
        <div class="describtion">{{ drawerInfo.flags }}</div>
        <div style="border: 1px solid #ccc"></div>
        <br />

        <!-- 附近 -->
        <div class="near">
          <div class="nearBtn">
            <img src="../assets/park.png" width="28" height="28" />
            <a href="#">停车场</a>
          </div>
          <div class="nearBtn">
            <img src="../assets/hotel.png" width="32" height="32" />
            <a href="#" class="jiudian">酒店</a>
          </div>
          <div class="nearBtn">
            <img src="../assets/food.png" width="36" height="36" />
            <a href="#">餐厅</a>
          </div>
          <div class="nearBtn">
            <img src="../assets/coffe.png" width="22" height="22" />
            <a href="#">咖啡店</a>
          </div>
          <div class="nearBtn">
            <img src="../assets/iol.png" width="28" height="28" />
            <a href="#">加油站</a>
          </div>
          <div class="nearBtn">
            <img src="../assets/near.png" width="28" height="28" />
            <a href="#">附近</a>
          </div>
        </div>

        <!-- <span>我来啦!</span> -->
      </el-drawer>
    </div>

    <br />
    <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
      background
    >
    </el-pagination>
  </div>
</template>

<script>
// 引入axios
import { get } from "@/utils/request";
// import { showCompletionScript } from "yargs";
export default {
  // components: {
  //   "add-Info": () => import("../components/SvgIcon/hosinfo.vue"),
  // },
  data() {
    return {
      // 要查询的医院名称
      hosName: "",
      // 医院的相关数据
      hosData: [],
      // 分页所需要的变量
      // 当前页码
      page: 1,
      // 每页要展示的数据条数
      pageSize: 5,
      // 数据总条数
      total: 10,

      drawer: false,
      drawerInfo: {},
      direction: "rtl",
      position: [116.397428, 39.90923],
    };
  },
  created() {
    // 自动获取医院的相关数据
    this.getHosData();
    // 自动获取当前的定位信息
    this.getLngLatData();
    // let {longitude,latitude} = this.$route.query;
    // this.position = [+longitude,+latitude]
  },
  mounted() {
    this.loadMap()
  },
  

  methods: {
    getWeb:function(val){
	    return val
	},

    loadMap(){
      console.log(123);
      var map = new AMap.Map("container_hospital", {
      zoom: 16, //级别
      center: this.position,
    });
    // 创建一个 Marker 实例：
    var marker = new AMap.Marker({
      position: this.position,
      // title: item,
    });

    // 将创建的点标记添加到已有的地图实例：
    map.add(marker);
  },
    // 获取当前定位的经纬度
    getLngLatData() {
      // 将this的执行进行一个保存
      // 嵌套函数里面的this
      // 箭头函数里面的this
      let _this = this;
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量
          offset: [10, 20],
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          position: "RB",
        });

        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            onComplete(result);
          } else {
            onError(result);
          }
        });

        function onComplete(data) {
          // data是具体的定位信息
          // console.log(data);
          // 获取到经度
          let longitude = data.position.lng;
          // 获取到纬度
          let latitude = data.position.lat;
          // console.log(longitude, latitude);

          // 遍历医院信息的数组 获取到每一个医院的经纬度 与 我们当前位置的经纬度做一个对比
          _this.hosData.map((item) => {
            // 当前位置的经纬度
            let p1 = [longitude, latitude];
            // 获取到所有医院的经纬度
            let p2 = [item.longitude, item.latitude];
            // 根据两个位置的经纬度 获取他们直接的距离
            let dis = AMap.GeometryUtil.distance(p1, p2);
            // console.log(dis);
            // $set(目标对象,要添加的属性名,要添加的属性值)
            _this.$set(item, "distance", (dis / 1000).toFixed(2));
          });
        }

        function onError(data) {
          // 定位出错
          console.log(data);
        }
      });
    },
    // 获取医院相关信息
    async getHosData() {
      // 设置参数
      let params = {
        // 当前的页码
        page: this.page,
        // 每页要展示多少条数据
        pageSize: this.pageSize,
        // 查询的名称
        name: this.hosName,
      };
      // 发送请求
      let res = await get("/hospital/pageQuery", params);
      // 赋值
      // console.log(res);
      this.hosData = res.data.list;
      // 获取到数据的总条数
      this.total = res.data.total;
    },
    // 分页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      // 获取用户点击分页之后的页码 赋值给this.page
      this.page = val;
      // 再去调用一次获取获取医院相关信息的方法
      this.getHosData();
    },
    // 跳转到相关定位的地图页面
    toMap(item) {
      //  let p2 = [item.longitude, item.latitude];
      //  this.mounted(p2);
      this.position = [item.longitude, item.latitude];
      this.loadMap()
      // this.$router.push({
      //   // 目标页面的路径
      //   path:'/hospital/index',
      //   // 需要传递的参数
      //   query: item
      // })
    },
    handleClose(done) {
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      done();
      // })
      // .catch(_ => {});
    },
    showDrawer(item) {
      (this.drawer = true), (this.drawerInfo = item);
    },
  },
};
</script>

<style scoped>
/* 顶部背景区域的样式 */
.topBgArea {
  /* 设置背景图片 */
  background-image: url("../assets/bg1.png");
  width: 100%;
  /* 设置行高 */
  line-height: 130px;
  border-radius: 5px;
}
/* 设置标题的样式 */
.topBgArea .title {
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin-left: 20px;
}
/* 设置搜索区域的样式 */
.searchArea {
  display: flex;
  width: 33%;
  margin-top: 5px;
}
/* 设置搜索区域的按钮样式 */
.searchArea .searchBtn {
  margin-left: 5px;
}
/* 设置医院列表区域样式 */
.hospitalInfo {
  float: left;
  margin-right: 30px;
  display: inline-block;
  width: 33%;
}
.hosListArea {
  display: flex;
  /* background-color: red; */
  margin-top: 20px;
  padding: 10px;
  width: 100%;
  height: 100px;
  /* 下边框 边框的宽度  边框的样式 边框的颜色*/
  border: 1px solid #11101037;
  box-shadow: 10px 10px 5px rgb(217, 215, 215);
  border-radius: 10px;
}

.hosListArea:hover {
  background: #bbdbe3;
}
/* 设置医院信息区域的样式 */
.hosListArea .hosInfo {
  /* 如何分配剩余空间 */
  flex: 1;
}
/* 医院的名称 */
.hosListArea .hosInfo .name {
  font-size: 15px;
  font-weight: bold;
  margin: 10px;
}
/* 医院的描述 */
.hosListArea .hosInfo .desc {
  font-size: 10px;
  background-color: #fcb14d;
  /* 切换该标签的显示模式 */
  display: inline-block;
  border-radius: 5px;
  /* 设置内边距 */
  padding: 0.2em;
  color: white;
}
/* 医院的地址 */
.hosListArea .hosInfo .address {
  font-size: 10px;
  color: gray;
  margin: 10px;
}
.hosListArea .hosInfo .disLocation .dis {
  margin: 10px;
}
.informationInfo {
  width: 35%;
  height: 200px;
  background-color: black;
}
.bi bi-telephone {
  width: 100px;
  height: 100px;
  color: red;
}
.title {
  font-size: 36px;
  font-weight: bold;
  margin: 20px;
  padding-left: 10px;
  padding-bottom: 30px;
}
.listInfo {
  margin-left: 20px;
  width: 100%;
  height: 50px;
}
.imag {
  float: left;
  display: block;
  padding: 5px;
  margin: 5px;
  padding-right: 20px;
}
.into {
  color: rgb(61, 61, 183);
  line-height: 40px;
  padding-left: 5px;
  margin-left: 5px;
}
.describtion {
  font-size: 18px;
  font-family: "Times New Roman", Times, serif;
  text-align: justify;
  text-indent: 36px;
  color: rgb(75, 75, 75);
  width: 90%;
  height: 200px;
  padding: 20px;
  margin-left: 30px;
  margin-bottom: 30px;
}
.nearBtn {
  float: left;
  line-height: 50px;
  height: 50px;
  width: 47%;
  border: 1px solid rgb(172, 170, 170);
  margin: 1px;
  margin-left: 10px;
  border-radius: 5px;
}
.nearBtn a {
  color: rgb(101, 99, 99);
  font-size: 15px;
  line-height: 50px;
  margin-left: 10px;
  padding-left: 30px;
  
}
.jiudian {
  line-height: 30px;
}
.nearBtn:hover {
  background: #b0b1b1;
}
#container_hospital {
  /* float: left; */
  display: inline-block;
  width: 60%;
  height: 600px;
}
</style>
